import React from 'react'
import PropTypes from 'prop-types'
import { View, StyleSheet, Text } from 'react-native'
import { px2dp } from 'rn-xiaobu-utils';
import Icon from '../../public/icon'
import flexStyle from '../../../configs/flex'
import fontsize from '../../../configs/fontsize';
import skin from '../../../configs/skin';

export default class RouteDesc extends React.Component {
  static propTypes = {
    busNames: PropTypes.array,
    allStationNumber: PropTypes.number,
    allPrice: PropTypes.number
  }
  render() {
    let bus = []
    this.props.busNames.forEach((ele, index)=>{
      if (index !== this.props.busNames.length - 1) {
        bus.push(<Text key={index + 'buskey'}>{ele}</Text>)
        bus.push(<Icon key={index + 'busicon'} color={'#999999'}
          name={'next'}
          size={22}></Icon>)
      } else {
        bus.push(<Text key={index + 'buskey'}>{ele}</Text>)
      }
    })
    return (
      <View style={[styles.wrapper, flexStyle.flexV, flexStyle.flexHsb]}>
        <View style={flexStyle.flexH}>
          <Icon name={'bus'} size={40} />
          <View style={[flexStyle.flexH, flexStyle.flexVc, { marginLeft: px2dp(30) }]}>{bus}</View>
        </View>
        <View style={[styles.lineWrapper, flexStyle.flexH, flexStyle.flexHsb, flexStyle.flexVc]}>
          <Text style={[fontsize.fontsize24, skin.baseColorNoAcitve]}>{this.props.busNames[0]}·距离2站</Text>
          <Text style={[fontsize.fontsize24, { color: '#999999' }]}>共{this.props.allStationNumber}站·票价{this.props.allPrice}元</Text>
        </View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  wrapper: {
    width: px2dp(750),
    height: px2dp(165),
    paddingHorizontal: px2dp(30),
    paddingTop: px2dp(30),
    backgroundColor: '#ffffff'
  },
  lineWrapper: {
    borderTopWidth: px2dp(1),
    borderBottomColor: '#DDDDDD',
    height: px2dp(64)
  }
})